<template>
	<view class="container">

		<view class="box" style="position: relative;">
			<view class="return" @click="Back">◀ 返回上一页</view>
			<uni-steps :options="options" :active="active" deactiveColor="#222" />
			<swiper :duration="1000" :current='active' disable-touch>
				<swiper-item>
					<view class="recharge-item" :class="item.title === formData.project ? 'select' : ''"
						v-for="(item,index) in project" :key="item.title" @click="select(0, item.title)">
						<uni-icons custom-prefix="iconfont" :type="item.icon" size="30" />
						<view class="title">{{item.title}}</view>
						<view class="desc">{{item.desc}}</view>
						<view class="price">{{item.price}}</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="recharge-item" :class="item.title === formData.method ? 'select' : ''"
						v-for="(item,index) in method" :key="item.title" @click="select(1, item.title)">
						<uni-icons custom-prefix="iconfont" :type="item.icon" :color='item.color' size="30" />
						<view class="title">{{item.title}}</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="recharge-item">
						<view style="margin-bottom: 20px;">请打开
							<span :style="formData.method === '微信支付' ? 'color: #15BA11' : 'color: #009FE8'">
								{{formData.method === '微信支付' ? '微信' : '支付宝'}}
							</span>
							扫码支付
						</view>
						<image style="height: 300px; width: 300px; border-radius: 10px;" :src="qrcode"></image>
						<view style="margin-top: 20px;">支付 <span style="color: #F66767">15</span> 元</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view style="font-size: 30px; font-weight: bold; display: flex; align-items: center;">
						<uni-icons type="checkmarkempty" size="50" color="#15BA11" style="margin-right: 20px;" />
						支付成功
					</view>
				</swiper-item>
			</swiper>
			<view class="btn" v-if="active !== 3">
				<view class="pre" @click="Previous">{{active == 2 ? '取消订单' : '上一步'}}</view>
				<view class="next" @click="Next">{{active == 1 ? '提交订单' : active == 2 ? '我已付款' : '下一步'}}</view>
			</view>
		</view>

		<uni-popup ref="message" type="message">
			<uni-popup-message :type="message.type" :message="message.message" :duration="2000" />
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
						title: '充值项目'
					},
					{
						title: '充值方式'
					},
					{
						title: '用户付款'
					},
					{
						title: '交易完成'
					}
				],
				project: [{
					title: '普通会员',
					desc: '聊天30次/天',
					price: '10元/月',
					icon: 'icon-vip'
				}, {
					title: '高级会员',
					desc: '聊天50次/天',
					price: '15元/月',
					icon: 'icon-svip'
				}, {
					title: '超级会员',
					desc: '无限制聊天',
					price: '25元/月',
					icon: 'icon-ssvip'
				}],
				method: [{
					title: '支付宝支付',
					icon: 'icon-alipay',
					color: '#009FE8'
				}, {
					title: '微信支付',
					icon: 'icon-wechatpay',
					color: '#15BA11'
				}, ],
				active: 0,
				qrcode: undefined,
				formData: {
					project: undefined,
					method: undefined,
					result: undefined
				},
				message: {
					type: undefined,
					message: undefined
				},
			};
		},
		methods: {
			MessageEvent(type, message) {
				this.message.type = type
				this.message.message = message
				this.$refs.message.open()
			},
			Back() {
				uni.navigateBack()
			},
			Previous() {
				if (this.active == 0) return
				if (this.active == 2) return this.MessageEvent('warn', '现在不让你取消')
				this.active--
			},
			Next() {
				const index = this.active
				const formData = this.formData
				if (index == 3) return
				if (index == 2) return this.MessageEvent('warn', '付款完成后将自动跳转')
				else if (index == 1 && formData.method) {
					this.get_qrcode()
					return this.active++
				} else if (index == 0 && formData.project) return this.active++
				return this.MessageEvent('warn', '先选一个再按下一步嘛')
			},
			select(index, item) {
				if (item === '微信支付') return this.MessageEvent('warn', '暂不支持微信支付')
				if (index === 0) return this.formData.project = item
				else if (index === 1) return this.formData.method = item
			},
			get_qrcode() {
				const text = '//pay.qq.com'
				const url = `https://cli.im/api/qrcode/code?text=${text}&mhid=s0PFBAi9nMIhMHYoLN1XPKM`
				uni.request({
					url: url,
					success: (res) => {
						console.log(res.data)
						const regex = /var qrcode_plugins_img ="(.*?)";/;
						const matches = res.data.match(regex);

						if (matches) {
							this.qrcode = matches[1]
						} else {
							console.log("未找到匹配的内容");
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$bg: rgba(255, 255, 255, .5);
	$shadow-base: 0 0 10px rgba($color: #fff, $alpha: 0.5);

	.container {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box {
		height: 100%;
		width: 90%;
		max-width: 768px;
		padding: 20px 10px;
		background-color: $bg;
		overflow: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.uni-steps {
		margin-bottom: 20px;
	}

	swiper,
	swiper-item {
		cursor: default;
		height: 500px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.recharge-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20px;
		border-radius: 10px;

		span {
			margin: 0 10px;
			font-size: larger;
			font-weight: bold;
		}

		view {
			margin-bottom: 5px;
		}

		.title {
			margin-top: 10px;
			font-size: 1rem;
			font-weight: bold;
		}

		.price,
		.desc {
			color: #333;
			font-size: .1rem;
		}

		&.select {
			background-color: rgba($color: #fff, $alpha: .5);
		}
	}

	.btn {
		display: flex;
		width: 100%;
		justify-content: space-between;

		view {
			margin: 5px 10px;
			padding: 10px;
			border-radius: 10px;

			&:hover {
				background-color: $uni-color-primary;
				color: #fff;
			}
		}
	}

	.return {
		position: absolute;
		top: 5%;
		left: 5%;
		padding: 5px;
		border-radius: 5px;

		&:hover {
			background-color: $uni-color-primary;
			color: #fff;
		}
	}
</style>